<template #jSelectDept="{model, field }">
  <div class="p-4">
    <!--height: 115px  -->
    <Card style="height: 115px;top: -12px;">
      <div class="!my-4 enter-y" style="display: flex; align-items: center;">
        <span style="margin-right: 8px;">选择部门：</span>
        <div style="width: 200px;">
          <JSelectDept v-model="selectedDept" :onChange="onChange" :showButton="false" :multiple="false"
            style="width: 100%;" />
        </div>
      </div>
      <span style="margin-left: 8px;">总人数：{{ totalEmployees }}</span>

      <!-- 添加的按钮 -->
      <!-- <a-button type="primary" @click="showPopover" style="margin-left: 80%;margin-top: -5px;">数据维度</a-button>
      <Popover v-model:visible="popoverVisible" trigger="click" ref="popover" placement="bottomRight">
        <template #content>
          <div v-for="item in list" :key="item.name" class="checkbox-item checkbox-container">
            <Checkbox :value="item.name" :checked="item.status" @change="updateStatus(item, $event.target.checked)">
              <span>{{ item.name }}</span>
            </Checkbox>
          </div>
        </template>
      </Popover> -->

    </Card>
    <div class="md:flex enter-y container" style=" width:100vw; height: 310px; ">
      <!-- <div class="child" v-if="showVisitSourcesA"> -->
        <VisitSourceA class="child" v-if="showVisitSourcesA" :loading="loading" ref="registerFormA" />
      <!-- </div> -->
      <!-- <div class="child" v-if="showVisitSourcesB"> -->
        <VisitSourceB class="child" v-if="showVisitSourcesB" :loading="loading" ref="registerFormB" />
      <!-- </div> -->
      <!-- <div class="child" v-if="showVisitSourcesC"> -->
        <VisitSourceC class="child" v-if="showVisitSourcesC" :loading="loading" ref="registerFormC" />
      <!-- </div> -->
      <!-- <div class="child" v-if="showVisitSourcesD"> -->
        <!-- <VisitSourceD class="child" v-if="showVisitSourcesD" :loading="loading" ref="registerFormD" /> -->
      <!-- </div> -->
      <!-- <div class="child" v-if="showVisitSourcesE"> -->
        <!-- <VisitSourceE class="child" v-if="showVisitSourcesE" :loading="loading" ref="registerFormE" /> -->
      <!-- </div> -->
    </div>
    <!-- <div class="md:flex enter-y" style="width: 101%; height: 300px;">
      <VisitSourceA v-if="showVisitSourcesA" style="width: calc(100% / selectedCount.value); height: 310px;" :loading="loading" ref="registerFormA" />
      <VisitSourceB v-if="showVisitSourcesB" style="width: calc(100% / selectedCount.value); height: 310px;" :loading="loading" ref="registerFormB" />
      <VisitSourceC v-if="showVisitSourcesC" style="width: calc(100% / selectedCount.value); height: 310px;" :loading="loading" ref="registerFormC" />
      <VisitSourceD v-if="showVisitSourcesD" style="width: calc(100% / selectedCount.value); height: 310px;" :loading="loading" ref="registerFormD" />
      <VisitSourceE v-if="showVisitSourcesE" style="width: calc(100% / selectedCount.value); height: 310px;" :loading="loading" ref="registerFormE" />
    </div> -->
    <SiteAnalysis class="!my-4 enter-y" :loading="loading" ref="registerForm" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, watch, nextTick } from 'vue';
import SiteAnalysis from '../count/SiteAnalysis.vue';
import VisitSourceA from '../count/VisitSourceA.vue';
import VisitSourceB from '../count/VisitSourceB.vue';
import VisitSourceC from '../count/VisitSourceC.vue';
import VisitSourceD from '../count/VisitSourceD.vue';
import VisitSourceE from '../count/VisitSourceE.vue';
import JSelectDept from '../../../../components/Form/src/jeecg/components/JSelectDept.vue';
import { Card } from 'ant-design-vue';
import { countAll } from '../../../system/labuser/SysUser.api';
import { BasicModal } from '/@/components/Modal';
import { Modal } from 'ant-design-vue';
import SelectModal from '../count/SelectModal.vue';
import { optionsListApi } from '/@/api/demo/select';
import { CheckboxGroup, Checkbox } from 'ant-design-vue';
import { Popover } from 'ant-design-vue';


const showVisitSourcesA = ref(true); // 添加此行
const showVisitSourcesB = ref(true); // 添加此行
const showVisitSourcesC = ref(true); // 添加此行
// const showVisitSourcesD = ref(true); // 添加此行
// const showVisitSourcesE = ref(true); // 添加此行


// const popoverVisible = ref(false);
// function showPopover() {
//   popoverVisible.value = true;
// }


// const list = [
//   { name: "性别", status: true },
//   { name: "年龄", status: true },
//   { name: "职称", status: true },
//   { name: "恰恰", status: true },
//   { name: "布罗迪", status: true },
// ]
// const selectedCount = ref(5);
// function updateStatus(item, checked) {

//   item.status = checked;
//   if (item.name === '性别') {
//     showVisitSourcesA.value = checked;
//   } else if (item.name === '年龄') {
//     showVisitSourcesB.value = checked;
//   } else if (item.name === '职称') {
//     showVisitSourcesC.value = checked;
//   } else if (item.name === '恰恰') {
//     showVisitSourcesD.value = checked;
//   } else if (item.name === '布罗迪') {
//     showVisitSourcesE.value = checked;
//   }
//   const selectedCountValue = list.filter(obj => obj.status).length;
//   selectedCount.value = selectedCountValue;
// console.log(" selectedCount.value", selectedCount.value);


//   popoverVisible.value = false;
//   nextTick(() => {
//     popoverVisible.value = true;
//   });

// }



const loading = ref(false);
// setTimeout(() => {
//   loading.value = false;
// }, 500);


const selectedDept = ref('');
const totalEmployees = ref();

async function getMessage() {
  try {
    const res = await countAll({ id: selectedDept.value });
    totalEmployees.value = res;
  } catch (error) {
    console.error(error);
  }
}

onMounted(async () => {
  getMessage();

});
const registerForm = ref();
const registerFormA = ref();
const registerFormB = ref();
const registerFormC = ref();
const registerFormD = ref();
const registerFormE = ref();

function onChange(deptId) {
  selectedDept.value = deptId[0];
  // 将选中的部门传递到对应统计组件
  getMessage();
  registerFormA.value.chart(selectedDept);
  registerFormB.value.chart(selectedDept);
  registerFormC.value.chart(selectedDept);
  registerFormD.value.chart(selectedDept);
  registerFormE.value.chart(selectedDept);


}

</script>
<style>
.checkbox-container {
  display: block;
  margin-bottom: 10px;
  /* 控制复选框之间的垂直间距 */

}

.container {
  display: flex;
  margin-top: -10px;
  justify-content: space-between; /* 使子控件均匀分布 */
}
.child {
  flex: 1; /* 子控件平分容器宽度 */
  /* 可以添加其他样式来装饰子控件 */
  /* border: 1px solid #ccc; */
  min-width: 0;
  padding: 10px;
  text-align: center;
}
</style>
